import type { Route } from "./+types/home-page";
import {
  WcButton,
  WcCheckbox,
  WcCheckboxGroup,
  WcCollapsible,
  WcFormContainer,
  WcFormHelper,
  WcIcon,
  WcLabel,
  WcMultiSelect,
  WcOption,
  WcRadio,
  WcRadioGroup,
  WcSingleSelect,
  WcTextfield,
  WcSplitLayout,
  WcScrollable,
  WcFormGroup,
  WcToolbarContainer,
  WcToolbarButton,
  WcContextMenu,
  type WcContextMenuElement,
} from "webcomponents/dist/react";

import styles from './home-page.module.less'

export function meta({}: Route.MetaArgs) {
  return [{ title: "New React Router App" }, { name: "description", content: "Welcome to React Router!" }];
}

export default function Home() {
  return (
    <div className="home-page">
      <WcToolbarContainer className={styles['toolbar-container']}>
        <WcToolbarButton icon="files" label="Files"></WcToolbarButton>
        <WcToolbarButton icon="search" label="Search"></WcToolbarButton>
        <WcToolbarButton icon="source-control" label="Source Control"></WcToolbarButton>
        <WcToolbarButton icon="debug-alt" label="Debug"></WcToolbarButton>
        <WcToolbarButton icon="extensions" label="Extensions"></WcToolbarButton>
        <div className={styles['menu-wrapper']}>
          <WcToolbarButton icon="menu" label="Menu" onClick={() => {
            const contextMenu = document.getElementById("context-menu") as WcContextMenuElement;
            contextMenu.data = [
              {
                label: 'Command palette...',
                keybinding: 'Ctrl+Shift+A',
                value: 'menuitem1',
              },
              {
                separator: true,
              },
              {
                label: 'Settings',
                keybinding: 'Ctrl+Comma',
                value: 'menuitem2',
              },
              {
                label: 'Extensions',
                keybinding: 'Ctrl+Shift+X',
                value: 'menuitem3',
              },
            ];
            contextMenu.show = true;
          }}></WcToolbarButton>
          <WcContextMenu 
            id="context-menu" 
            className={styles['context-menu']}
            onWcMenuSelect={(e) => {
              console.log(e);
            }}
          ></WcContextMenu>
        </div>
      </WcToolbarContainer>
      <WcCollapsible heading="Basic example">
        <WcIcon name="account"></WcIcon>
        <WcIcon name="account" size={32}></WcIcon>
        <WcIcon name="account" size={48}></WcIcon>
        <WcIcon name="account" size={64}></WcIcon>
        <WcIcon name="loading" spin spin-duration="1"></WcIcon>
        <WcIcon name="sync" spin></WcIcon>
        <WcIcon name="gear" spin spin-duration="2"></WcIcon>
        <WcIcon name="account" title="account"></WcIcon>
        <WcIcon name="activate-breakpoints" title="activate-breakpoints"></WcIcon>
        <WcIcon name="add" title="add"></WcIcon>
        <WcIcon name="alert" title="alert"></WcIcon>
        <WcIcon name="archive" title="archive"></WcIcon>
        <WcIcon name="array" title="array"></WcIcon>
        <WcIcon name="arrow-both" title="arrow-both"></WcIcon>
        <WcIcon name="arrow-circle-down" title="arrow-circle-down"></WcIcon>
        <WcIcon name="arrow-circle-left" title="arrow-circle-left"></WcIcon>
        <WcIcon name="arrow-circle-right" title="arrow-circle-right"></WcIcon>
        <WcIcon name="arrow-circle-up" title="arrow-circle-up"></WcIcon>
        <WcIcon name="arrow-down" title="arrow-down"></WcIcon>
        <WcIcon name="arrow-left" title="arrow-left"></WcIcon>
        <WcIcon name="arrow-right" title="arrow-right"></WcIcon>
        <WcIcon name="arrow-small-down" title="arrow-small-down"></WcIcon>
        <WcIcon name="arrow-small-left" title="arrow-small-left"></WcIcon>
        <WcIcon name="arrow-small-right" title="arrow-small-right"></WcIcon>
        <WcIcon name="arrow-small-up" title="arrow-small-up"></WcIcon>
        <WcIcon name="arrow-swap" title="arrow-swap"></WcIcon>
        <WcIcon name="arrow-up" title="arrow-up"></WcIcon>
        <WcIcon name="azure" title="azure"></WcIcon>
        <WcIcon name="azure-devops" title="azure-devops"></WcIcon>
        <WcIcon name="beaker" title="beaker"></WcIcon>
        <WcIcon name="beaker-stop" title="beaker-stop"></WcIcon>
        <WcIcon name="bell" title="bell"></WcIcon>
        <WcIcon name="bell-dot" title="bell-dot"></WcIcon>
        <WcIcon name="bell-slash" title="bell-slash"></WcIcon>
        <WcIcon name="bell-slash-dot" title="bell-slash-dot"></WcIcon>
        <WcIcon name="blank" title="blank"></WcIcon>
        <WcIcon name="bold" title="bold"></WcIcon>
        <WcIcon name="book" title="book"></WcIcon>
        <WcIcon name="bookmark" title="bookmark"></WcIcon>
        <WcIcon name="bracket" title="bracket"></WcIcon>
        <WcIcon name="bracket-dot" title="bracket-dot"></WcIcon>
        <WcIcon name="bracket-error" title="bracket-error"></WcIcon>
        <WcIcon name="briefcase" title="briefcase"></WcIcon>
        <WcIcon name="broadcast" title="broadcast"></WcIcon>
        <WcIcon name="browser" title="browser"></WcIcon>
        <WcIcon name="bug" title="bug"></WcIcon>
        <WcIcon name="calendar" title="calendar"></WcIcon>
        <WcIcon name="call-incoming" title="call-incoming"></WcIcon>
        <WcIcon name="call-outgoing" title="call-outgoing"></WcIcon>
        <WcIcon name="case-sensitive" title="case-sensitive"></WcIcon>
        <WcIcon name="check" title="check"></WcIcon>
        <WcIcon name="check-all" title="check-all"></WcIcon>
        <WcIcon name="checklist" title="checklist"></WcIcon>
        <WcIcon name="chevron-down" title="chevron-down"></WcIcon>
        <WcIcon name="chevron-left" title="chevron-left"></WcIcon>
        <WcIcon name="chevron-right" title="chevron-right"></WcIcon>
        <WcIcon name="chevron-up" title="chevron-up"></WcIcon>
        <WcIcon name="chrome-close" title="chrome-close"></WcIcon>
        <WcIcon name="chrome-maximize" title="chrome-maximize"></WcIcon>
        <WcIcon name="chrome-minimize" title="chrome-minimize"></WcIcon>
        <WcIcon name="chrome-restore" title="chrome-restore"></WcIcon>
        <WcIcon name="circle" title="circle"></WcIcon>
        <WcIcon name="circle-filled" title="circle-filled"></WcIcon>
        <WcIcon name="circle-large" title="circle-large"></WcIcon>
        <WcIcon name="circle-large-filled" title="circle-large-filled"></WcIcon>
        <WcIcon name="circle-large-outline" title="circle-large-outline"></WcIcon>
        <WcIcon name="circle-outline" title="circle-outline"></WcIcon>
        <WcIcon name="circle-slash" title="circle-slash"></WcIcon>
        <WcIcon name="circle-small" title="circle-small"></WcIcon>
        <WcIcon name="circle-small-filled" title="circle-small-filled"></WcIcon>
        <WcIcon name="circuit-board" title="circuit-board"></WcIcon>
        <WcIcon name="clear-all" title="clear-all"></WcIcon>
        <WcIcon name="clippy" title="clippy"></WcIcon>
        <WcIcon name="clock" title="clock"></WcIcon>
        <WcIcon name="clone" title="clone"></WcIcon>
        <WcIcon name="close" title="close"></WcIcon>
        <WcIcon name="close-all" title="close-all"></WcIcon>
        <WcIcon name="close-dirty" title="close-dirty"></WcIcon>
        <WcIcon name="cloud" title="cloud"></WcIcon>
        <WcIcon name="cloud-download" title="cloud-download"></WcIcon>
        <WcIcon name="cloud-upload" title="cloud-upload"></WcIcon>
        <WcIcon name="code" title="code"></WcIcon>
        <WcIcon name="collapse-all" title="collapse-all"></WcIcon>
        <WcIcon name="color-mode" title="color-mode"></WcIcon>
        <WcIcon name="combine" title="combine"></WcIcon>
        <WcIcon name="comment" title="comment"></WcIcon>
        <WcIcon name="comment-add" title="comment-add"></WcIcon>
        <WcIcon name="comment-discussion" title="comment-discussion"></WcIcon>
        <WcIcon name="comment-draft" title="comment-draft"></WcIcon>
        <WcIcon name="comment-unresolved" title="comment-unresolved"></WcIcon>
        <WcIcon name="compare-changes" title="compare-changes"></WcIcon>
        <WcIcon name="compass" title="compass"></WcIcon>
        <WcIcon name="compass-active" title="compass-active"></WcIcon>
        <WcIcon name="compass-dot" title="compass-dot"></WcIcon>
        <WcIcon name="console" title="console"></WcIcon>
        <WcIcon name="copy" title="copy"></WcIcon>
        <WcIcon name="credit-card" title="credit-card"></WcIcon>
        <WcIcon name="dash" title="dash"></WcIcon>
        <WcIcon name="dashboard" title="dashboard"></WcIcon>
        <WcIcon name="database" title="database"></WcIcon>
        <WcIcon name="debug" title="debug"></WcIcon>
        <WcIcon name="debug-all" title="debug-all"></WcIcon>
        <WcIcon name="debug-alt" title="debug-alt"></WcIcon>
        <WcIcon name="debug-alt-small" title="debug-alt-small"></WcIcon>
        <WcIcon name="debug-breakpoint" title="debug-breakpoint"></WcIcon>
        <WcIcon name="debug-breakpoint-conditional" title="debug-breakpoint-conditional"></WcIcon>
        <WcIcon name="debug-breakpoint-conditional-disabled" title="debug-breakpoint-conditional-disabled"></WcIcon>
        <WcIcon name="debug-breakpoint-conditional-unverified" title="debug-breakpoint-conditional-unverified"></WcIcon>
        <WcIcon name="debug-breakpoint-data" title="debug-breakpoint-data"></WcIcon>
        <WcIcon name="debug-breakpoint-data-disabled" title="debug-breakpoint-data-disabled"></WcIcon>
        <WcIcon name="debug-breakpoint-data-unverified" title="debug-breakpoint-data-unverified"></WcIcon>
        <WcIcon name="debug-breakpoint-disabled" title="debug-breakpoint-disabled"></WcIcon>
        <WcIcon name="debug-breakpoint-function" title="debug-breakpoint-function"></WcIcon>
        <WcIcon name="debug-breakpoint-function-disabled" title="debug-breakpoint-function-disabled"></WcIcon>
        <WcIcon name="debug-breakpoint-function-unverified" title="debug-breakpoint-function-unverified"></WcIcon>
        <WcIcon name="debug-breakpoint-log" title="debug-breakpoint-log"></WcIcon>
        <WcIcon name="debug-breakpoint-log-disabled" title="debug-breakpoint-log-disabled"></WcIcon>
        <WcIcon name="debug-breakpoint-log-unverified" title="debug-breakpoint-log-unverified"></WcIcon>
        <WcIcon name="debug-breakpoint-unsupported" title="debug-breakpoint-unsupported"></WcIcon>
        <WcIcon name="debug-breakpoint-unverified" title="debug-breakpoint-unverified"></WcIcon>
        <WcIcon name="debug-console" title="debug-console"></WcIcon>
        <WcIcon name="debug-continue" title="debug-continue"></WcIcon>
        <WcIcon name="debug-continue-small" title="debug-continue-small"></WcIcon>
        <WcIcon name="debug-coverage" title="debug-coverage"></WcIcon>
        <WcIcon name="debug-disconnect" title="debug-disconnect"></WcIcon>
        <WcIcon name="debug-hint" title="debug-hint"></WcIcon>
        <WcIcon name="debug-line-by-line" title="debug-line-by-line"></WcIcon>
        <WcIcon name="debug-pause" title="debug-pause"></WcIcon>
        <WcIcon name="debug-rerun" title="debug-rerun"></WcIcon>
        <WcIcon name="debug-restart" title="debug-restart"></WcIcon>
        <WcIcon name="debug-restart-frame" title="debug-restart-frame"></WcIcon>
        <WcIcon name="debug-reverse-continue" title="debug-reverse-continue"></WcIcon>
        <WcIcon name="debug-stackframe" title="debug-stackframe"></WcIcon>
        <WcIcon name="debug-stackframe-active" title="debug-stackframe-active"></WcIcon>
        <WcIcon name="debug-stackframe-dot" title="debug-stackframe-dot"></WcIcon>
        <WcIcon name="debug-stackframe-focused" title="debug-stackframe-focused"></WcIcon>
        <WcIcon name="debug-start" title="debug-start"></WcIcon>
        <WcIcon name="debug-step-back" title="debug-step-back"></WcIcon>
        <WcIcon name="debug-step-into" title="debug-step-into"></WcIcon>
        <WcIcon name="debug-step-out" title="debug-step-out"></WcIcon>
        <WcIcon name="debug-step-over" title="debug-step-over"></WcIcon>
        <WcIcon name="debug-stop" title="debug-stop"></WcIcon>
        <WcIcon name="desktop-download" title="desktop-download"></WcIcon>
        <WcIcon name="device-camera" title="device-camera"></WcIcon>
        <WcIcon name="device-camera-video" title="device-camera-video"></WcIcon>
        <WcIcon name="device-desktop" title="device-desktop"></WcIcon>
        <WcIcon name="device-mobile" title="device-mobile"></WcIcon>
        <WcIcon name="diff" title="diff"></WcIcon>
        <WcIcon name="diff-added" title="diff-added"></WcIcon>
        <WcIcon name="diff-ignored" title="diff-ignored"></WcIcon>
        <WcIcon name="diff-modified" title="diff-modified"></WcIcon>
        <WcIcon name="diff-removed" title="diff-removed"></WcIcon>
        <WcIcon name="diff-renamed" title="diff-renamed"></WcIcon>
        <WcIcon name="discard" title="discard"></WcIcon>
        <WcIcon name="edit" title="edit"></WcIcon>
        <WcIcon name="editor-layout" title="editor-layout"></WcIcon>
        <WcIcon name="ellipsis" title="ellipsis"></WcIcon>
        <WcIcon name="empty-window" title="empty-window"></WcIcon>
        <WcIcon name="error" title="error"></WcIcon>
        <WcIcon name="error-small" title="error-small"></WcIcon>
        <WcIcon name="exclude" title="exclude"></WcIcon>
        <WcIcon name="expand-all" title="expand-all"></WcIcon>
        <WcIcon name="export" title="export"></WcIcon>
        <WcIcon name="extensions" title="extensions"></WcIcon>
        <WcIcon name="eye" title="eye"></WcIcon>
        <WcIcon name="eye-closed" title="eye-closed"></WcIcon>
        <WcIcon name="eye-unwatch" title="eye-unwatch"></WcIcon>
        <WcIcon name="eye-watch" title="eye-watch"></WcIcon>
        <WcIcon name="feedback" title="feedback"></WcIcon>
        <WcIcon name="file" title="file"></WcIcon>
        <WcIcon name="file-add" title="file-add"></WcIcon>
        <WcIcon name="file-binary" title="file-binary"></WcIcon>
        <WcIcon name="file-code" title="file-code"></WcIcon>
        <WcIcon name="file-directory" title="file-directory"></WcIcon>
        <WcIcon name="file-directory-create" title="file-directory-create"></WcIcon>
        <WcIcon name="file-media" title="file-media"></WcIcon>
        <WcIcon name="file-pdf" title="file-pdf"></WcIcon>
        <WcIcon name="file-submodule" title="file-submodule"></WcIcon>
        <WcIcon name="file-symlink-directory" title="file-symlink-directory"></WcIcon>
        <WcIcon name="file-symlink-file" title="file-symlink-file"></WcIcon>
        <WcIcon name="file-text" title="file-text"></WcIcon>
        <WcIcon name="file-zip" title="file-zip"></WcIcon>
        <WcIcon name="files" title="files"></WcIcon>
        <WcIcon name="filter" title="filter"></WcIcon>
        <WcIcon name="filter-filled" title="filter-filled"></WcIcon>
        <WcIcon name="flame" title="flame"></WcIcon>
        <WcIcon name="fold" title="fold"></WcIcon>
        <WcIcon name="fold-down" title="fold-down"></WcIcon>
        <WcIcon name="fold-up" title="fold-up"></WcIcon>
        <WcIcon name="folder" title="folder"></WcIcon>
        <WcIcon name="folder-active" title="folder-active"></WcIcon>
        <WcIcon name="folder-library" title="folder-library"></WcIcon>
        <WcIcon name="folder-opened" title="folder-opened"></WcIcon>
        <WcIcon name="gather" title="gather"></WcIcon>
        <WcIcon name="gear" title="gear"></WcIcon>
        <WcIcon name="gift" title="gift"></WcIcon>
        <WcIcon name="gist" title="gist"></WcIcon>
        <WcIcon name="gist-fork" title="gist-fork"></WcIcon>
        <WcIcon name="gist-new" title="gist-new"></WcIcon>
        <WcIcon name="gist-private" title="gist-private"></WcIcon>
        <WcIcon name="gist-secret" title="gist-secret"></WcIcon>
        <WcIcon name="git-branch" title="git-branch"></WcIcon>
        <WcIcon name="git-branch-create" title="git-branch-create"></WcIcon>
        <WcIcon name="git-branch-delete" title="git-branch-delete"></WcIcon>
        <WcIcon name="git-commit" title="git-commit"></WcIcon>
        <WcIcon name="git-compare" title="git-compare"></WcIcon>
        <WcIcon name="git-fork-private" title="git-fork-private"></WcIcon>
        <WcIcon name="git-merge" title="git-merge"></WcIcon>
        <WcIcon name="git-pull-request" title="git-pull-request"></WcIcon>
        <WcIcon name="git-pull-request-abandoned" title="git-pull-request-abandoned"></WcIcon>
        <WcIcon name="git-pull-request-closed" title="git-pull-request-closed"></WcIcon>
        <WcIcon name="git-pull-request-create" title="git-pull-request-create"></WcIcon>
        <WcIcon name="git-pull-request-draft" title="git-pull-request-draft"></WcIcon>
        <WcIcon name="git-pull-request-go-to-changes" title="git-pull-request-go-to-changes"></WcIcon>
        <WcIcon name="git-pull-request-new-changes" title="git-pull-request-new-changes"></WcIcon>
        <WcIcon name="github" title="github"></WcIcon>
        <WcIcon name="github-action" title="github-action"></WcIcon>
        <WcIcon name="github-alt" title="github-alt"></WcIcon>
        <WcIcon name="github-inverted" title="github-inverted"></WcIcon>
        <WcIcon name="globe" title="globe"></WcIcon>
        <WcIcon name="go-to-file" title="go-to-file"></WcIcon>
        <WcIcon name="grabber" title="grabber"></WcIcon>
        <WcIcon name="graph" title="graph"></WcIcon>
        <WcIcon name="graph-left" title="graph-left"></WcIcon>
        <WcIcon name="graph-line" title="graph-line"></WcIcon>
        <WcIcon name="graph-scatter" title="graph-scatter"></WcIcon>
        <WcIcon name="gripper" title="gripper"></WcIcon>
        <WcIcon name="group-by-ref-type" title="group-by-ref-type"></WcIcon>
        <WcIcon name="heart" title="heart"></WcIcon>
        <WcIcon name="heart-filled" title="heart-filled"></WcIcon>
        <WcIcon name="history" title="history"></WcIcon>
        <WcIcon name="home" title="home"></WcIcon>
        <WcIcon name="horizontal-rule" title="horizontal-rule"></WcIcon>
        <WcIcon name="hubot" title="hubot"></WcIcon>
        <WcIcon name="inbox" title="inbox"></WcIcon>
        <WcIcon name="indent" title="indent"></WcIcon>
        <WcIcon name="info" title="info"></WcIcon>
        <WcIcon name="insert" title="insert"></WcIcon>
        <WcIcon name="inspect" title="inspect"></WcIcon>
        <WcIcon name="issue-closed" title="issue-closed"></WcIcon>
        <WcIcon name="issue-draft" title="issue-draft"></WcIcon>
        <WcIcon name="issue-opened" title="issue-opened"></WcIcon>
        <WcIcon name="issue-reopened" title="issue-reopened"></WcIcon>
        <WcIcon name="issues" title="issues"></WcIcon>
        <WcIcon name="italic" title="italic"></WcIcon>
        <WcIcon name="jersey" title="jersey"></WcIcon>
        <WcIcon name="json" title="json"></WcIcon>
        <WcIcon name="kebab-horizontal" title="kebab-horizontal"></WcIcon>
        <WcIcon name="kebab-vertical" title="kebab-vertical"></WcIcon>
        <WcIcon name="key" title="key"></WcIcon>
        <WcIcon name="keyboard" title="keyboard"></WcIcon>
        <WcIcon name="law" title="law"></WcIcon>
        <WcIcon name="layers" title="layers"></WcIcon>
        <WcIcon name="layers-active" title="layers-active"></WcIcon>
        <WcIcon name="layers-dot" title="layers-dot"></WcIcon>
        <WcIcon name="layout" title="layout"></WcIcon>
        <WcIcon name="layout-activitybar-left" title="layout-activitybar-left"></WcIcon>
        <WcIcon name="layout-activitybar-right" title="layout-activitybar-right"></WcIcon>
        <WcIcon name="layout-centered" title="layout-centered"></WcIcon>
        <WcIcon name="layout-menubar" title="layout-menubar"></WcIcon>
        <WcIcon name="layout-panel" title="layout-panel"></WcIcon>
        <WcIcon name="layout-panel-center" title="layout-panel-center"></WcIcon>
        <WcIcon name="layout-panel-justify" title="layout-panel-justify"></WcIcon>
        <WcIcon name="layout-panel-left" title="layout-panel-left"></WcIcon>
        <WcIcon name="layout-panel-off" title="layout-panel-off"></WcIcon>
        <WcIcon name="layout-panel-right" title="layout-panel-right"></WcIcon>
        <WcIcon name="layout-sidebar-left" title="layout-sidebar-left"></WcIcon>
        <WcIcon name="layout-sidebar-left-off" title="layout-sidebar-left-off"></WcIcon>
        <WcIcon name="layout-sidebar-right" title="layout-sidebar-right"></WcIcon>
        <WcIcon name="layout-sidebar-right-off" title="layout-sidebar-right-off"></WcIcon>
        <WcIcon name="layout-statusbar" title="layout-statusbar"></WcIcon>
        <WcIcon name="library" title="library"></WcIcon>
        <WcIcon name="light-bulb" title="light-bulb"></WcIcon>
        <WcIcon name="lightbulb" title="lightbulb"></WcIcon>
        <WcIcon name="lightbulb-autofix" title="lightbulb-autofix"></WcIcon>
        <WcIcon name="link" title="link"></WcIcon>
        <WcIcon name="link-external" title="link-external"></WcIcon>
        <WcIcon name="list-filter" title="list-filter"></WcIcon>
        <WcIcon name="list-flat" title="list-flat"></WcIcon>
        <WcIcon name="list-ordered" title="list-ordered"></WcIcon>
        <WcIcon name="list-selection" title="list-selection"></WcIcon>
        <WcIcon name="list-tree" title="list-tree"></WcIcon>
        <WcIcon name="list-unordered" title="list-unordered"></WcIcon>
        <WcIcon name="live-share" title="live-share"></WcIcon>
        <WcIcon name="loading" title="loading"></WcIcon>
        <WcIcon name="location" title="location"></WcIcon>
        <WcIcon name="lock" title="lock"></WcIcon>
        <WcIcon name="lock-small" title="lock-small"></WcIcon>
        <WcIcon name="log-in" title="log-in"></WcIcon>
        <WcIcon name="log-out" title="log-out"></WcIcon>
        <WcIcon name="logo-github" title="logo-github"></WcIcon>
        <WcIcon name="magnet" title="magnet"></WcIcon>
        <WcIcon name="mail" title="mail"></WcIcon>
        <WcIcon name="mail-read" title="mail-read"></WcIcon>
        <WcIcon name="mail-reply" title="mail-reply"></WcIcon>
        <WcIcon name="map" title="map"></WcIcon>
        <WcIcon name="map-filled" title="map-filled"></WcIcon>
        <WcIcon name="mark-github" title="mark-github"></WcIcon>
        <WcIcon name="markdown" title="markdown"></WcIcon>
        <WcIcon name="megaphone" title="megaphone"></WcIcon>
        <WcIcon name="mention" title="mention"></WcIcon>
        <WcIcon name="menu" title="menu"></WcIcon>
        <WcIcon name="merge" title="merge"></WcIcon>
        <WcIcon name="microscope" title="microscope"></WcIcon>
        <WcIcon name="milestone" title="milestone"></WcIcon>
        <WcIcon name="mirror" title="mirror"></WcIcon>
        <WcIcon name="mirror-private" title="mirror-private"></WcIcon>
        <WcIcon name="mirror-public" title="mirror-public"></WcIcon>
        <WcIcon name="more" title="more"></WcIcon>
        <WcIcon name="mortar-board" title="mortar-board"></WcIcon>
        <WcIcon name="move" title="move"></WcIcon>
        <WcIcon name="multiple-windows" title="multiple-windows"></WcIcon>
        <WcIcon name="mute" title="mute"></WcIcon>
        <WcIcon name="new-file" title="new-file"></WcIcon>
        <WcIcon name="new-folder" title="new-folder"></WcIcon>
        <WcIcon name="newline" title="newline"></WcIcon>
        <WcIcon name="no-newline" title="no-newline"></WcIcon>
        <WcIcon name="note" title="note"></WcIcon>
        <WcIcon name="notebook" title="notebook"></WcIcon>
        <WcIcon name="notebook-template" title="notebook-template"></WcIcon>
        <WcIcon name="octoface" title="octoface"></WcIcon>
        <WcIcon name="open-preview" title="open-preview"></WcIcon>
        <WcIcon name="organization" title="organization"></WcIcon>
        <WcIcon name="organization-filled" title="organization-filled"></WcIcon>
        <WcIcon name="organization-outline" title="organization-outline"></WcIcon>
        <WcIcon name="output" title="output"></WcIcon>
        <WcIcon name="package" title="package"></WcIcon>
        <WcIcon name="paintcan" title="paintcan"></WcIcon>
        <WcIcon name="pass" title="pass"></WcIcon>
        <WcIcon name="pass-filled" title="pass-filled"></WcIcon>
        <WcIcon name="pencil" title="pencil"></WcIcon>
        <WcIcon name="person" title="person"></WcIcon>
        <WcIcon name="person-add" title="person-add"></WcIcon>
        <WcIcon name="person-filled" title="person-filled"></WcIcon>
        <WcIcon name="person-follow" title="person-follow"></WcIcon>
        <WcIcon name="person-outline" title="person-outline"></WcIcon>
        <WcIcon name="pie-chart" title="pie-chart"></WcIcon>
        <WcIcon name="pin" title="pin"></WcIcon>
        <WcIcon name="pinned" title="pinned"></WcIcon>
        <WcIcon name="pinned-dirty" title="pinned-dirty"></WcIcon>
        <WcIcon name="play" title="play"></WcIcon>
        <WcIcon name="play-circle" title="play-circle"></WcIcon>
        <WcIcon name="plug" title="plug"></WcIcon>
        <WcIcon name="plus" title="plus"></WcIcon>
        <WcIcon name="preserve-case" title="preserve-case"></WcIcon>
        <WcIcon name="preview" title="preview"></WcIcon>
        <WcIcon name="primitive-dot" title="primitive-dot"></WcIcon>
        <WcIcon name="primitive-square" title="primitive-square"></WcIcon>
        <WcIcon name="project" title="project"></WcIcon>
        <WcIcon name="pulse" title="pulse"></WcIcon>
        <WcIcon name="question" title="question"></WcIcon>
        <WcIcon name="quote" title="quote"></WcIcon>
        <WcIcon name="radio-tower" title="radio-tower"></WcIcon>
        <WcIcon name="reactions" title="reactions"></WcIcon>
        <WcIcon name="record" title="record"></WcIcon>
        <WcIcon name="record-keys" title="record-keys"></WcIcon>
        <WcIcon name="record-small" title="record-small"></WcIcon>
        <WcIcon name="redo" title="redo"></WcIcon>
        <WcIcon name="references" title="references"></WcIcon>
        <WcIcon name="refresh" title="refresh"></WcIcon>
        <WcIcon name="regex" title="regex"></WcIcon>
        <WcIcon name="remote" title="remote"></WcIcon>
        <WcIcon name="remote-explorer" title="remote-explorer"></WcIcon>
        <WcIcon name="remove" title="remove"></WcIcon>
        <WcIcon name="remove-close" title="remove-close"></WcIcon>
        <WcIcon name="repl" title="repl"></WcIcon>
        <WcIcon name="replace" title="replace"></WcIcon>
        <WcIcon name="replace-all" title="replace-all"></WcIcon>
        <WcIcon name="reply" title="reply"></WcIcon>
        <WcIcon name="repo" title="repo"></WcIcon>
        <WcIcon name="repo-clone" title="repo-clone"></WcIcon>
        <WcIcon name="repo-create" title="repo-create"></WcIcon>
        <WcIcon name="repo-delete" title="repo-delete"></WcIcon>
        <WcIcon name="repo-force-push" title="repo-force-push"></WcIcon>
        <WcIcon name="repo-forked" title="repo-forked"></WcIcon>
        <WcIcon name="repo-pull" title="repo-pull"></WcIcon>
        <WcIcon name="repo-push" title="repo-push"></WcIcon>
        <WcIcon name="repo-sync" title="repo-sync"></WcIcon>
        <WcIcon name="report" title="report"></WcIcon>
        <WcIcon name="request-changes" title="request-changes"></WcIcon>
        <WcIcon name="rocket" title="rocket"></WcIcon>
        <WcIcon name="root-folder" title="root-folder"></WcIcon>
        <WcIcon name="root-folder-opened" title="root-folder-opened"></WcIcon>
        <WcIcon name="rss" title="rss"></WcIcon>
        <WcIcon name="ruby" title="ruby"></WcIcon>
        <WcIcon name="run" title="run"></WcIcon>
        <WcIcon name="run-above" title="run-above"></WcIcon>
        <WcIcon name="run-all" title="run-all"></WcIcon>
        <WcIcon name="run-below" title="run-below"></WcIcon>
        <WcIcon name="run-errors" title="run-errors"></WcIcon>
        <WcIcon name="save" title="save"></WcIcon>
        <WcIcon name="save-all" title="save-all"></WcIcon>
        <WcIcon name="save-as" title="save-as"></WcIcon>
        <WcIcon name="screen-full" title="screen-full"></WcIcon>
        <WcIcon name="screen-normal" title="screen-normal"></WcIcon>
        <WcIcon name="search" title="search"></WcIcon>
        <WcIcon name="search-fuzzy" title="search-fuzzy"></WcIcon>
        <WcIcon name="search-save" title="search-save"></WcIcon>
        <WcIcon name="search-stop" title="search-stop"></WcIcon>
        <WcIcon name="selection" title="selection"></WcIcon>
        <WcIcon name="send" title="send"></WcIcon>
        <WcIcon name="server" title="server"></WcIcon>
        <WcIcon name="server-environment" title="server-environment"></WcIcon>
        <WcIcon name="server-process" title="server-process"></WcIcon>
        <WcIcon name="settings" title="settings"></WcIcon>
        <WcIcon name="settings-gear" title="settings-gear"></WcIcon>
        <WcIcon name="shield" title="shield"></WcIcon>
        <WcIcon name="sign-in" title="sign-in"></WcIcon>
        <WcIcon name="sign-out" title="sign-out"></WcIcon>
        <WcIcon name="smiley" title="smiley"></WcIcon>
        <WcIcon name="sort-precedence" title="sort-precedence"></WcIcon>
        <WcIcon name="source-control" title="source-control"></WcIcon>
        <WcIcon name="sparkle" title="sparkle"></WcIcon>
        <WcIcon name="split-horizontal" title="split-horizontal"></WcIcon>
        <WcIcon name="split-vertical" title="split-vertical"></WcIcon>
        <WcIcon name="squirrel" title="squirrel"></WcIcon>
        <WcIcon name="star" title="star"></WcIcon>
        <WcIcon name="star-add" title="star-add"></WcIcon>
        <WcIcon name="star-delete" title="star-delete"></WcIcon>
        <WcIcon name="star-empty" title="star-empty"></WcIcon>
        <WcIcon name="star-full" title="star-full"></WcIcon>
        <WcIcon name="star-half" title="star-half"></WcIcon>
        <WcIcon name="stop" title="stop"></WcIcon>
        <WcIcon name="stop-circle" title="stop-circle"></WcIcon>
        <WcIcon name="symbol-array" title="symbol-array"></WcIcon>
        <WcIcon name="symbol-boolean" title="symbol-boolean"></WcIcon>
        <WcIcon name="symbol-class" title="symbol-class"></WcIcon>
        <WcIcon name="symbol-color" title="symbol-color"></WcIcon>
        <WcIcon name="symbol-constant" title="symbol-constant"></WcIcon>
        <WcIcon name="symbol-constructor" title="symbol-constructor"></WcIcon>
        <WcIcon name="symbol-enum" title="symbol-enum"></WcIcon>
        <WcIcon name="symbol-enum-member" title="symbol-enum-member"></WcIcon>
        <WcIcon name="symbol-event" title="symbol-event"></WcIcon>
        <WcIcon name="symbol-field" title="symbol-field"></WcIcon>
        <WcIcon name="symbol-file" title="symbol-file"></WcIcon>
        <WcIcon name="symbol-folder" title="symbol-folder"></WcIcon>
        <WcIcon name="symbol-function" title="symbol-function"></WcIcon>
        <WcIcon name="symbol-interface" title="symbol-interface"></WcIcon>
        <WcIcon name="symbol-key" title="symbol-key"></WcIcon>
        <WcIcon name="symbol-keyword" title="symbol-keyword"></WcIcon>
        <WcIcon name="symbol-method" title="symbol-method"></WcIcon>
        <WcIcon name="symbol-misc" title="symbol-misc"></WcIcon>
        <WcIcon name="symbol-module" title="symbol-module"></WcIcon>
        <WcIcon name="symbol-namespace" title="symbol-namespace"></WcIcon>
        <WcIcon name="symbol-null" title="symbol-null"></WcIcon>
        <WcIcon name="symbol-number" title="symbol-number"></WcIcon>
        <WcIcon name="symbol-numeric" title="symbol-numeric"></WcIcon>
        <WcIcon name="symbol-object" title="symbol-object"></WcIcon>
        <WcIcon name="symbol-operator" title="symbol-operator"></WcIcon>
        <WcIcon name="symbol-package" title="symbol-package"></WcIcon>
        <WcIcon name="symbol-parameter" title="symbol-parameter"></WcIcon>
        <WcIcon name="symbol-property" title="symbol-property"></WcIcon>
        <WcIcon name="symbol-reference" title="symbol-reference"></WcIcon>
        <WcIcon name="symbol-ruler" title="symbol-ruler"></WcIcon>
        <WcIcon name="symbol-snippet" title="symbol-snippet"></WcIcon>
        <WcIcon name="symbol-string" title="symbol-string"></WcIcon>
        <WcIcon name="symbol-struct" title="symbol-struct"></WcIcon>
        <WcIcon name="symbol-structure" title="symbol-structure"></WcIcon>
        <WcIcon name="symbol-text" title="symbol-text"></WcIcon>
        <WcIcon name="symbol-type-parameter" title="symbol-type-parameter"></WcIcon>
        <WcIcon name="symbol-unit" title="symbol-unit"></WcIcon>
        <WcIcon name="symbol-value" title="symbol-value"></WcIcon>
        <WcIcon name="symbol-variable" title="symbol-variable"></WcIcon>
        <WcIcon name="sync" title="sync"></WcIcon>
        <WcIcon name="sync-ignored" title="sync-ignored"></WcIcon>
        <WcIcon name="table" title="table"></WcIcon>
        <WcIcon name="tag" title="tag"></WcIcon>
        <WcIcon name="tag-add" title="tag-add"></WcIcon>
        <WcIcon name="tag-remove" title="tag-remove"></WcIcon>
        <WcIcon name="target" title="target"></WcIcon>
        <WcIcon name="tasklist" title="tasklist"></WcIcon>
        <WcIcon name="telescope" title="telescope"></WcIcon>
        <WcIcon name="terminal" title="terminal"></WcIcon>
        <WcIcon name="terminal-bash" title="terminal-bash"></WcIcon>
        <WcIcon name="terminal-cmd" title="terminal-cmd"></WcIcon>
        <WcIcon name="terminal-debian" title="terminal-debian"></WcIcon>
        <WcIcon name="terminal-decoration-error" title="terminal-decoration-error"></WcIcon>
        <WcIcon name="terminal-decoration-incomplete" title="terminal-decoration-incomplete"></WcIcon>
        <WcIcon name="terminal-decoration-mark" title="terminal-decoration-mark"></WcIcon>
        <WcIcon name="terminal-decoration-success" title="terminal-decoration-success"></WcIcon>
        <WcIcon name="terminal-linux" title="terminal-linux"></WcIcon>
        <WcIcon name="terminal-powershell" title="terminal-powershell"></WcIcon>
        <WcIcon name="terminal-tmux" title="terminal-tmux"></WcIcon>
        <WcIcon name="terminal-ubuntu" title="terminal-ubuntu"></WcIcon>
        <WcIcon name="text-size" title="text-size"></WcIcon>
        <WcIcon name="three-bars" title="three-bars"></WcIcon>
        <WcIcon name="thumbsdown" title="thumbsdown"></WcIcon>
        <WcIcon name="thumbsup" title="thumbsup"></WcIcon>
        <WcIcon name="tools" title="tools"></WcIcon>
        <WcIcon name="trash" title="trash"></WcIcon>
        <WcIcon name="trashcan" title="trashcan"></WcIcon>
        <WcIcon name="triangle-down" title="triangle-down"></WcIcon>
        <WcIcon name="triangle-left" title="triangle-left"></WcIcon>
        <WcIcon name="triangle-right" title="triangle-right"></WcIcon>
        <WcIcon name="triangle-up" title="triangle-up"></WcIcon>
        <WcIcon name="twitter" title="twitter"></WcIcon>
        <WcIcon name="type-hierarchy" title="type-hierarchy"></WcIcon>
        <WcIcon name="type-hierarchy-sub" title="type-hierarchy-sub"></WcIcon>
        <WcIcon name="type-hierarchy-super" title="type-hierarchy-super"></WcIcon>
        <WcIcon name="unfold" title="unfold"></WcIcon>
        <WcIcon name="ungroup-by-ref-type" title="ungroup-by-ref-type"></WcIcon>
        <WcIcon name="unlock" title="unlock"></WcIcon>
        <WcIcon name="unmute" title="unmute"></WcIcon>
        <WcIcon name="unverified" title="unverified"></WcIcon>
        <WcIcon name="variable" title="variable"></WcIcon>
        <WcIcon name="variable-group" title="variable-group"></WcIcon>
        <WcIcon name="verified" title="verified"></WcIcon>
        <WcIcon name="verified-filled" title="verified-filled"></WcIcon>
        <WcIcon name="versions" title="versions"></WcIcon>
        <WcIcon name="vm" title="vm"></WcIcon>
        <WcIcon name="vm-active" title="vm-active"></WcIcon>
        <WcIcon name="vm-connect" title="vm-connect"></WcIcon>
        <WcIcon name="vm-outline" title="vm-outline"></WcIcon>
        <WcIcon name="vm-running" title="vm-running"></WcIcon>
        <WcIcon name="wand" title="wand"></WcIcon>
        <WcIcon name="warning" title="warning"></WcIcon>
        <WcIcon name="watch" title="watch"></WcIcon>
        <WcIcon name="whitespace" title="whitespace"></WcIcon>
        <WcIcon name="whole-word" title="whole-word"></WcIcon>
        <WcIcon name="window" title="window"></WcIcon>
        <WcIcon name="word-wrap" title="word-wrap"></WcIcon>
        <WcIcon name="workspace-trusted" title="workspace-trusted"></WcIcon>
        <WcIcon name="workspace-unknown" title="workspace-unknown"></WcIcon>
        <WcIcon name="workspace-untrusted" title="workspace-untrusted"></WcIcon>
        <WcIcon name="wrench" title="wrench"></WcIcon>
        <WcIcon name="wrench-subaction" title="wrench-subaction"></WcIcon>
        <WcIcon name="x" title="x"></WcIcon>
        <WcIcon name="zap" title="zap"></WcIcon>
        <WcIcon name="zoom-in" title="zoom-in"></WcIcon>
        <WcIcon name="zoom-out" title="zoom-out"></WcIcon>
      </WcCollapsible>
      <WcSplitLayout initial-position="95%" className="astro-7c4kqbly" handle-size="4" initial-handle-position="50%" split="vertical">
        <WcScrollable slot="start" className="astro-7c4kqbly" shadow>
          <WcFormContainer responsive className="astro-7c4kqbly">
            <WcFormGroup className="astro-7c4kqbly" variant="vertical" data-original-variant="horizontal">
              <WcLabel htmlFor="textfield-01" className="astro-7c4kqbly" id="vscode-label-1">
                Lorem <span className="normal astro-7c4kqbly">ipsum</span>:
              </WcLabel>
              <WcTextfield id="textfield-01" name="input-1" placeholder="Placeholder example" className="astro-7c4kqbly" type="text"></WcTextfield>
              <WcFormHelper className="astro-7c4kqbly">
                <p className="astro-7c4kqbly">
                  Lorem ipsum <code className="astro-7c4kqbly">let dolor = sit amet</code>, consectetur adipiscing elit. <span className="error astro-7c4kqbly">Suspendisse</span> faucibus imperdiet sapien, a
                  gravida
                  <a href="#" className="astro-7c4kqbly">
                    dolor
                  </a>
                  .
                </p>
                <ul className="astro-7c4kqbly">
                  <li className="astro-7c4kqbly">Lorem</li> <li className="astro-7c4kqbly">Ipsum</li> <li className="astro-7c4kqbly">Dolor</li>
                </ul>
              </WcFormHelper>
            </WcFormGroup>
            <WcFormGroup className="astro-7c4kqbly" variant="vertical" data-original-variant="horizontal">
              <WcLabel htmlFor="textfield-02" className="astro-7c4kqbly" id="vscode-label-2">
                Dolor sit:
              </WcLabel>
              <WcTextfield id="textfield-02" name="input-2" className="astro-7c4kqbly" type="text"></WcTextfield>
            </WcFormGroup>
            <WcFormGroup className="astro-7c4kqbly" variant="vertical" data-original-variant="horizontal">
              <WcLabel htmlFor="select-01" className="astro-7c4kqbly" id="vscode-label-3">
                <span className="lightened astro-7c4kqbly">Duis eget</span> erat accumsan:
              </WcLabel>
              <WcSingleSelect id="select-01" name="select-1" className="astro-7c4kqbly" label="Duis eget erat accumsan:" position="below">
                <WcOption className="astro-7c4kqbly">Lorem</WcOption>
                <WcOption className="astro-7c4kqbly">Ipsum</WcOption>
                <WcOption className="astro-7c4kqbly">Dolor</WcOption>
              </WcSingleSelect>
            </WcFormGroup>
            <WcFormGroup className="astro-7c4kqbly" variant="vertical" data-original-variant="horizontal">
              <WcLabel htmlFor="select-02" className="astro-7c4kqbly" id="vscode-label-4">
                <span className="lightened astro-7c4kqbly">Duis eget</span> erat accumsan:
              </WcLabel>
              <WcMultiSelect id="select-02" name="select-2" className="astro-7c4kqbly" label="Duis eget erat accumsan:" position="below">
                <WcOption className="astro-7c4kqbly">Lorem</WcOption>
                <WcOption className="astro-7c4kqbly">Ipsum</WcOption>
                <WcOption className="astro-7c4kqbly">Dolor</WcOption>
              </WcMultiSelect>
            </WcFormGroup>
            <WcFormGroup className="astro-7c4kqbly" variant="vertical" data-original-variant="horizontal">
              <WcLabel htmlFor="checkbox-01" className="astro-7c4kqbly" id="vscode-label-5">
                Phasellus quam arcu:
              </WcLabel>
              <WcCheckboxGroup className="astro-7c4kqbly" role="group" variant="vertical" data-original-variant="horizontal">
                <WcCheckbox id="checkbox-01" name="checkbox-group-1" value="lorem" label="Lorem ipsum" className="astro-7c4kqbly" aria-label="Lorem ipsum" aria-checked="false"></WcCheckbox>
                <WcCheckbox id="checkbox-02" name="checkbox-group-1" value="ipsum" label="Donec mi risus" className="astro-7c4kqbly" aria-label="Donec mi risus" aria-checked="false"></WcCheckbox>
                <WcCheckbox id="checkbox-03" name="checkbox-group-1" value="dolor" className="astro-7c4kqbly" aria-checked="false" aria-label="Duis ullamcorper">
                  Duis
                  <a href="#" className="astro-7c4kqbly">
                    ullamcorper
                  </a>
                </WcCheckbox>
              </WcCheckboxGroup>
            </WcFormGroup>
            <WcFormGroup className="astro-7c4kqbly" variant="vertical" data-original-variant="horizontal">
              <WcLabel htmlFor="checkbox-04" className="astro-7c4kqbly" id="vscode-label-6">
                Phasellus quam arcu:
              </WcLabel>
              <WcCheckboxGroup variant="vertical" className="astro-7c4kqbly" role="group" data-original-variant="vertical">
                <WcCheckbox id="checkbox-04" name="checkbox-group-2" value="sit" className="astro-7c4kqbly" aria-checked="false" aria-label="Lorem ipsum">
                  Lorem ipsum
                </WcCheckbox>
                <WcCheckbox id="checkbox-05" name="checkbox-group-2" value="et" className="astro-7c4kqbly" aria-checked="false" aria-label="Donec mi risus">
                  Donec mi risus
                </WcCheckbox>
                <WcCheckbox
                  id="checkbox-06"
                  name="checkbox-group-2"
                  value="amur"
                  className="astro-7c4kqbly"
                  aria-checked="false"
                  aria-label="Nullam tincidunt eros sit amet sollicitudin pharetra. Ut quis
            rutrum enim, non finibus odio. Morbi tempus lacus neque, eget rutrum
            sapien porttitor vitae. Vivamus placerat nisl eu turpis tristique,
            eu consectetur libero finibus. Duis vitae orci at risus ultrices
            gravida. Ut vitae nulla velit. Mauris sed enim eleifend, euismod
            tortor vitae, vehicula odio."
                >
                  Nullam tincidunt eros sit amet sollicitudin pharetra. Ut quis rutrum enim, non finibus odio. Morbi tempus lacus neque, eget rutrum sapien porttitor vitae. Vivamus placerat nisl eu
                  turpis tristique, eu consectetur libero finibus. Duis vitae orci at risus ultrices gravida. Ut vitae nulla velit. Mauris sed enim eleifend, euismod tortor vitae, vehicula odio.
                </WcCheckbox>
              </WcCheckboxGroup>
            </WcFormGroup>
            <WcFormGroup className="astro-7c4kqbly" variant="vertical" data-original-variant="horizontal">
              <WcLabel htmlFor="radio-01" className="astro-7c4kqbly" id="vscode-label-7">
                Phasellus quam arcu:
              </WcLabel>
              <WcRadioGroup className="astro-7c4kqbly" variant="vertical" role="radiogroup" data-original-variant="horizontal">
                <WcRadio id="radio-01" name="radio-group-1" value="lorem" className="astro-7c4kqbly" role="radio" tab-index="0" aria-label="Lorem ipsum">
                  Lorem ipsum
                </WcRadio>
                <WcRadio id="radio-02" name="radio-group-1" value="ipsum" className="astro-7c4kqbly" role="radio" tab-index="-1" aria-label="Donec mi risus">
                  Donec mi risus
                </WcRadio>
                <WcRadio id="radio-03" name="radio-group-1" value="dolor" className="astro-7c4kqbly" role="radio" tab-index="-1" aria-label="Duis ullamcorper">
                  Duis
                  <a href="#" className="astro-7c4kqbly">
                    ullamcorper
                  </a>
                </WcRadio>
              </WcRadioGroup>
            </WcFormGroup>
            <WcFormGroup className="astro-7c4kqbly" variant="vertical" data-original-variant="horizontal">
              <WcLabel htmlFor="radio-04" className="astro-7c4kqbly" id="vscode-label-8">
                Phasellus quam arcu:
              </WcLabel>
              <WcRadioGroup variant="vertical" className="astro-7c4kqbly" role="radiogroup" data-original-variant="vertical">
                <WcRadio id="radio-04" name="radio-group-2" value="sit" className="astro-7c4kqbly" role="radio" tab-index="0" aria-label="Lorem ipsum">
                  Lorem ipsum
                </WcRadio>
                <WcRadio id="radio-05" name="radio-group-2" value="et" className="astro-7c4kqbly" role="radio" tab-index="-1" aria-label="Donec mi risus">
                  Donec mi risus
                </WcRadio>
                <WcRadio id="radio-06" name="radio-group-2" value="amur" className="astro-7c4kqbly" role="radio" tab-index="-1" aria-label="Duis ullamcorper">
                  Duis ullamcorper
                </WcRadio>
              </WcRadioGroup>
            </WcFormGroup>
            <WcFormGroup className="astro-7c4kqbly" variant="vertical" data-original-variant="horizontal">
              <WcButton id="save-button" className="astro-7c4kqbly" tab-index="0" role="button" type="button">
                Save
              </WcButton>
              <WcButton secondary className="astro-7c4kqbly" tab-index="0" role="button" type="button">
                Cancel
              </WcButton>
            </WcFormGroup>
          </WcFormContainer>
        </WcScrollable>
        <div slot="end" className="astro-7c4kqbly">
          <div className="resize-it astro-7c4kqbly">
            <WcIcon name="arrow-up" className="astro-7c4kqbly"></WcIcon> Resize it
          </div>
        </div>
      </WcSplitLayout>
      
    </div>
  );
}
